<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue2.0 -->
    <script src="../js/vue.js"></script>
    <title>事件修饰符</title>
    <style>
        * {
            margin-top: 20px;
        }

        .demo1 {
            height: 50px;
            background: skyblue;
        }

        .box1 {
            padding: 5px;
            background: skyblue;
        }

        .box2 {
            padding: 5px;
            background: rgb(209, 176, 28);
        }

        .list {
            width: 200px;
            height: 200px;
            background: skyblue;
            overflow: auto;
        }

        .list li {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<!-- 
        Vue的事件修饰符：
            1. .prevent:阻止默认行为（常用）
            2. .stop:阻止事件冒泡（常用）
            3. .once:事件只触发一次（常用）

            4. .capture:使用事件的捕获模式   加在谁身上，谁就在捕获阶段执行事件，不用等到冒泡了
            5. .self:只有event.target是当前操作元素时才触发事件（防止穿透事件，因为点击最上方的按钮，下边的会冒泡过去，但是事件不是自身触发的还是上方触发的，一旦加上self就增加了一个判断，那么就不会触发了）
            6. .passive:事件默认行为立即执行。无需等待事件回调执行完毕
                    .passive：像wheel似的先执行回调函数，才执行默认事件，wheel中回调函数写了1000000次循环，那么如果不加这个，则先执行等执行完了滚动条才往下走
                    这样太离谱了

                    但是不是所有事件都是这样scroll也是滚动条就不是这个执行顺序，人家自动先执行默认事件，再执行回调函数



            捕获和冒泡
            先捕获阶段————再冒泡阶段
            我们写的事件方法执行是在冒泡阶段，而不是捕获阶段


            捕获：事件不执行，捕获顺序是从里向外
            冒泡：事件执行，  冒泡顺序是是从外到里边div2————div1

            那么有的时候我就想事件方法执行顺序是捕获的顺序，从里到外，怎么办？
            把事件执行改到捕获阶段不久可以了吗？

 -->

<body>
    <div id="root">
        <h2>欢迎来到{{name}}的世界</h2>
        <!-- 阻止默认行为（常用） -->
        <a href="https://cn.vuejs.org/v2/guide/installation.html#Vue-Devtools"
            @click.prevent="showInfo">点击我提示信息但是阻止跳转vue官网</a>
        <!-- 阻止事件冒泡（常用） -->
        <div @click="showInfo" class="demo1">
            <button @click.stop="showInfo">点击我阻止冒泡</button>
            <!-- 点击按钮但是弹窗了两次，也就是透过button冒泡到div上边了 -->
        </div>
        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点击我只弹窗一次</button>

        <!-- 使用事件捕获模式 -->
        <!-- 加在谁身上，谁就在捕获阶段执行事件，不用等到冒泡了 -->
        <div class="box1" @click.capture="showMsg('外围盒子')">
            div1
            <div class="box2" @click="showMsg('里边盒子')">
                div2
            </div>
        </div>

        <!-- 使用事件捕获模式 -->
        <!-- 加在谁身上，谁就在捕获阶段执行事件，不用等到冒泡了 -->
        <div class="box1" @click.self="showMessage">
            div1
            <div class="box2" @click="showMessage">
                div2
            </div>
        </div>
        <ul @scroll="demo" class="list">
            <!-- 滚轮和鼠标都可以触发，滚轮到头不会触发 -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 事件默认行为立即执行。无需等待事件回调执行完毕 -->
        <ul @wheel.passive="demo" class="list">
            <!--滚轮触发，且尽管滚轮到头还会执行  -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
    <script>
        const Vm = new Vue({
            el: "#root",
            data: {
                name: "名师"
            },
            methods: {
                showInfo(e) {
                    // 原生js方法
                    // e.preventDefault()  ——阻止默认事件
                    // e.stopPropagation() ——阻止冒泡事件
                    alert('北京明白')
                },
                showMsg(msg) {
                    alert(msg)
                },
                showMessage(e) {
                    // 如果不加self修饰符，打印出来的元素都是div2的，执行div1是因为事件冒泡过去的，但是e还是谁触发的事件的目标
                    console.log(e.target)
                },
                demo(e) {
                    for (let i = 0; i < 100000; i++) {
                        console.log('#')
                    }
                    console.log('累死了')
                }
            }
        })
    </script>

</body>

</html>